<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件委托</title>
        <style type="text/css">
            .tab { 
                margin: auto;
                border: 1px solid blue ;
                border-spacing: 10px;
            }
            .tab td {
                border: 1px solid blue ;
                width: 200px;
                height: 100px;
                vertical-align: middle ;
                text-align: center;
            }
            .tab textarea {
                border: none ;
                outline: none ;
                background: #ff0 ;
                width: 200px;
                height: 100px;
                resize: none;
            }
        </style>
    </head>
    <body>

        <table class="tab">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

        <script type="text/javascript">
            (()=>{

                let tab = document.querySelector( '.tab' );

                let taBlurListener = {
                    handleEvent(e){
                        // 获得失去焦点的 textarea 元素
                        let t = e.target ;
                        // 获得 textarea 元素的父节点
                        let p = t.parentNode ;
                        // p.removeChild( t ); // Node.prototype.removeChild( child )
                        // t.remove(); // Element.prototype.remove()
                        // 通过 value 属性可以获得 input 或 textarea 元素的值
                        p.innerHTML = t.value ;
                    }
                }

                let tabDoubleClickListener = {
                    handleEvent(e){
                        let t = e.target ;
                        console.log( 'table listener: ' , t );
                        // 创建一个新的 textarea 元素
                        let ta = document.createElement( 'textarea' );
                        // 将 textarea 元素添加到 单元格内部
                        t.appendChild( ta );
                        // 让 textarea 获得焦点
                        ta.focus();
                        // 监听 textarea 失去焦点( blur ) 事件
                        ta.addEventListener( 'blur', taBlurListener , false );
                    }
                }

                tab.addEventListener( 'dblclick' , tabDoubleClickListener , false );

                /*
                let tds = document.querySelectorAll( '.tab td' );
                // 逐个为 td 元素绑定事件监听器 (缺点是 耗时、占内存 )
                Array.from( tds ).forEach( td => {
                    td.addEventListener( 'click' , {
                        handleEvent(e){
                            console.log( 'td listener: ' , e.target );
                        }
                    } , true );
                });
                */
            })();
        </script>
        
    </body>
</html>